<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>

        .box {
            border: 1px solid red;
            height: 200px;
            width: 200px;
            background-color: green;
        }
    </style>

</head>
<body>

    <div id='app'>
       <div @click='myClick1' class="box">
           xxxx
        <button @click.stop='myClick2'>点击</button>
      

        <!-- prevent  阻止默认跳转 a  form  主要是针对这个两个标签 -->
    <a href="http://www.baidu.com" @click.prevent.stop='goBd'>百度</a>

    <!-- @input='myInput' -->
    <!-- @change.stop='mychange' -->
    <input type="text" v-model='msg'     @keyup.stop.enter='myInput' >
    <input type="text" v-model='msg'     @keyup.stop.13='myInput' >

</div>
    </div>
    <script>
     let  vm=new  Vue({
         el:'#app',
         data:{
             msg:'点击'
         },
         methods:{
            myClick2(){
                alert(2)
            },
            // myClick1() {
            //     alert('1')
            // },
            goBd() {
                alert('百度')
            },
            myInput() {
                alert('input  xxxxx  13')

            },
            mychange() {
                alert('change')
            }
            

         }
     })

    </script>
</body>
</html>